<template>
  <div>
    <Card>
      <tables ref="tables" editable searchable search-place="top" v-model="tableData" :columns="columns" />
      <Button style="margin: 10px 0;" type="primary" @click="exportExcel">导出为excel文件</Button>
    </Card>
    <Modal width="1000" v-model="visible" :title="title" :mask-closable="false" ok-text="关闭" cancel-text=" " @on-ok="okModal" @on-cancel="cancelModal">
      <!-- <Row>
        <Col span="8">
        <strong style="font-size:15px;">补货人：{{ replenishMan }}</strong>
        </Col>
        <Col span="8">
        <strong style="font-size:15px;">补货数量：{{ replenishCount }}</strong>
        </Col>
        <Col span="8">
        <strong style="font-size:15px;">补货时间：{{ replenishDate }}</strong>
        </Col>
      </Row> -->
      <tables ref="detailTables" v-model="detailTable" :columns="detailColumns" />
      <Button style="margin-top: 10px;" type="primary" @click="exportDetailExcel">补货详情excel导出</Button>
    </Modal>
  </div>
</template>

<script>
import Mock from 'mockjs'
import Tables from '_c/tables'
import {
  machineGroupNameList,
  machineGroupNameValues,
  machineNumberList,
  machineNumberValues,
  doorList,
  commoditys,
} from '@/mock/data/option-data.js';
import rcRequest from 'rc-request'
import jsCookie from 'js-cookie'

export default {
  name: 'door_record_page',
  components: {
    Tables
  },
  data() {
    return {
      columns: [
        { title: '机器组名', key: 'machineGroupName' },
        { title: '机器编号', key: 'machineNumber' },
        { title: '机器名', key: 'machineName' },
        { title: '补货次数', key: 'replenishTimes' },
        { title: '补货数量', key: 'replenishCount' },
        { title: '部署地址', key: 'deployAddress' },
        // { title: '最新补货时间', key: 'replenishDate' },
        // { title: '补货人', key: 'replenishMan' },
        {
          title: '操作',
          key: 'action',
          width: 140,
          render: (h, params) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'info',
                  size: 'small',
                  ghost: true,
                },
                on: {
                  click: async () => {
                    this.visible = true;
                    const { data: { data } } = await rcRequest({
                      method: 'post',
                      url: '/replenishmentdetails/select_replenishment_record_list_info',
                      data: { machine_id: params.row.machine_id }
                    })
                    console.log(params.row.id)
                    this.detailTable = data.map(item => ({
                      id: item.id,
                      freightWay: item.aisle_name,
                      commodityName: item.product_name,
                      replenishCountBefore: item.quantity_before_replenishment,
                      replenishCountAfter: item.quantity_after_replenishment,
                      replenishCountWait: item.quantity_to_be_replenished,
                      replenishDate: item.replenishment_time,
                      replenishMan: item.user_name,
                    }))
                  }
                }
              }, '详情'),
              // h('span', {}, ' '),
              // h('Button', {
              //   props: {
              //     type: 'warning',
              //     size: 'small',
              //     ghost: true,
              //   },
              //   on: {
              //     click: () => this.tableData.splice(params.index, 1)
              //   },
              // }, '删除')
            ]);
          }
        }
      ],
      tableData: [],
      machineGroupNameList,
      machineNumberList,
      doorList,
      // 补货详情
      title: '补货详情',
      visible: false,
      replenishDate: '',
      replenishMan: '',
      replenishCount: '',
      detailTable: [],
      detailColumns: [
        { title: '货道', key: 'freightWay' },
        { title: 'SKU/商品名称', key: 'commodityName' },
        { title: '补货前数量', key: 'replenishCountBefore' },
        { title: '补货后数量', key: 'replenishCountAfter' },
        { title: '待补货数量', key: 'replenishCountWait' },
        { title: '最新补货时间', key: 'replenishDate' },
        { title: '补货人', key: 'replenishMan' },
        // {
        //   title: '操作',
        //   key: 'action',
        //   render: (h, params) => {
        //     return h('div', [
        //       h('Button', {
        //         props: {
        //           type: 'warning',
        //           size: 'small',
        //           ghost: true,
        //         },
        //         on: {
        //           click: () => this.detailTable.splice(params.index, 1)
        //         },
        //       }, '删除')
        //     ]);
        //   }
        // }
      ],
    }
  },
  methods: {
    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `补货记录-${(new Date()).valueOf()}.csv`
      })
    },

    exportDetailExcel() {
      this.$refs.detailTables.exportCsv({
        filename: `补货详情-${(new Date()).valueOf()}.csv`
      })
    },

    okModal() { },

    cancelModal() { },

    // 获取列表数据
    async getListData() {
      const { data: { data } } = await rcRequest({
        method: 'post',
        url: '/replenishmentdetails/select_replenishment_record_list',
        data: { }
      })
      this.tableData = data.map(item => ({
        id: item.id,
        machineGroupName: item.machine_group_name,
        machineNumber: item.machine_number,
        machineName: item.machine_name,
        replenishTimes: item.replenishment_amount,
        replenishCount: item.replenishment_quantity,
        deployAddress: item.addr,
        replenishDate: '',
        replenishMan: '',
        machine_id: item.machine_id,
      }))
    },
  },
  mounted() {
    this.getListData()
  }
}
</script>

<style scoped></style>
